/*
	面积图
*/
define(
	[
		'require',
		'echarts',
		'echarts/chart/line',
		'zrender/tool/util'
	],
	function (require) {
		"use strict";

		var echarts = require('echarts');
		var zrUtil = require('zrender/tool/util');

		var forEach = Ember.EnumerableUtils.forEach;

		var theme = {
			// 默认色板
			color: [
				'#0bafce','#b6a2de','#5ab1ef','#ffb980','#d87a80',
				'#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
				'#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
				'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
			],

			// 图表标题
			title: {
				textStyle: {
					fontSize: 14,
					fontFamily: '微软雅黑',
					fontWeight: 'normal',
					color: '#000'		  // 主标题文字颜色
				}
			},

			// 网格
			grid: {
				borderColor: '#eee'
			},

			// 类目轴
			categoryAxis: {
				axisLine: {			// 坐标轴线
					lineStyle: {	   // 属性lineStyle控制线条样式
						color: '#17487c',
						width: 1,
						type: 'solid'
					}
				},
				splitLine: {		   // 分隔线
					lineStyle: {	   // 属性lineStyle（详见lineStyle）控制线条样式
						color: ['#eee']
					}
				},
				axisLabel:{
					textStyle:{
						color:'#6ac5fe'
					}
				},
				axisTick : {
					lineStyle : {
						color: '#ccc',
						width: 1,
						type: 'solid'
					}
				}
			},

			// 数值型坐标轴默认参数
			valueAxis: {
				axisLine: {			// 坐标轴线
					lineStyle: {	   // 属性lineStyle控制线条样式
						color: '#ccc',
						width: 1,
						type: 'solid'
					}
				},
				splitLine: {		   // 分隔线
					lineStyle: {	   // 属性lineStyle（详见lineStyle）控制线条样式
						color: ['#17487c'],
						width: 1
					}
				},
				axisLabel:{
					textStyle:{
						color:'#6ac5fe'
					}
				},
				axisTick : {
					lineStyle : {
						color: '#ccc',
						width: 1,
						type: 'solid'
					}
				}
			},

			// 柱形图默认参数
			bar: {
				itemStyle: {
					normal: {
						barBorderRadius: 5
					},
					emphasis: {
						barBorderRadius: 5
					}
				}
			},

			// 折线图默认参数
			line: {
				smooth : true,
				symbol: 'emptyCircle',  // 拐点图形类型
				symbolSize: 3		   // 拐点图形大小
			},

			textStyle: {
				fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
			}
		};

		var LineView = Ember.Component.extend({
			didInsertElement: function(){
				var view = this;
				var $dom = this.$();

				this.width = this.width||$dom.width();
				this.height = this.height||$dom.height();

				if(this.width === 0 || this.height === 0){
					Ember.assert("必须指定视图的width和height。（可通过样式或width，height属性");
					return;
				}

				this._initChart();

				APM.on("mainContainerResize", this, "_resizeChart");
				$(window).on("resize."+this.elementId, function(){
					view._resizeChart();
				});
			},

			willDestroyElement: function(){
				this.chart.dispose();
				this.chart = null;
				APM.off("mainContainerResize");
				$(window).off("resize."+this.elementId);
			},

			/**
			 * 初始化图表
			 */
			_initChart: function(){
				var $dom = this.$();

				if(G_vmlCanvasManager && G_vmlCanvasManager.init){
					G_vmlCanvasManager.initElement($dom[0]);
				}

				var chart = echarts.init($dom[0], theme);
				this.chart = chart;

				this.dataChange();
			},

			/**
			 * 数据改变后, 刷新图表
			 */
			dataChange: Ember.observer("data", function(){
				if(!this.chart || !this.get("data")){
					return;
				}

				var data = this.get("data"),
					dataKey = this.get("dataKey")[0],
					ctrl = this,
					newData = [],
					arr = [];
				if(this.get("top")){
					data.sort(function(a, b) {
						return   parseFloat(b[dataKey]) - parseFloat(a[dataKey]);
					});
					data.forEach(function(node,index){
						if(node[dataKey] != "-"){
							newData.push(node);
						}
					});
					Ember.A(newData).forEach(function(node,index){
						if(ctrl.get("order") == "asc"){
							if((newData.length - ctrl.get("top")) <= index && index < newData.length){
	
								if(ctrl.get("pos") == "left"){
									arr.unshift(node); ;
								}else{
									arr.unshift(node);
								}
							}
						}else{
							if(index < ctrl.get("top") ){
	
								if(ctrl.get("pos") == "left"){
									arr.unshift(node); ;
								}else{
									arr.push(node);
								}
							}
						}
						
					});
					ctrl.set("newDate",arr);
				}else{
					ctrl.set("newDate",data);
				}
				var option = this._getDefaultOption();

				this.option = option;

				this.hasData = false;
				
				this._translateOption(option);
				this.chart.clear();
				this.chart.setOption(option, true);
				this.chart.hideLoading();
			}),

			_getDefaultOption: function(){
				return {};
			},

			_translateOption: function(option){
				this._translateSeries(option);
				this._translateOther(option);
				this._setFormatter(option);
			},

			_translateSeries: function(option){
				//需要实现
			},

			_translateOther: function(option){
				//需要实现
			},

			_setFormatter: function(option){
				//需要实现
			},

			_resizeChart: function(){
				var $dom = this.$();

				this.width = $dom.width();
				this.height = $dom.height();

				this.chart.resize();
			}
		});
		return LineView;
	}
);